<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Canvas 绘制渐变</title>
	<style>
		body {
			background: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		canvas {
			background: #fff;
		}

		h1 {
			color: #fff;
			font-size: 24px;
		}
	</style>
</head>

<body>
	<h1>渐变</h1>
	<canvas id="drawing" width="500" height="500"></canvas>
	<script>
		/** @type {HTMLCanvasElement} */
		var drawing = document.getElementById('drawing');
		if (drawing.getContext) {
			const ctx = drawing.getContext('2d');

			// 线性渐变
			let gradient = ctx.createLinearGradient(
				50, // 渐变开始点的 x 坐标
				50, // 渐变开始点的 y 坐标
				100, // 渐变结束点的 x 坐标
				100 // 渐变结束点的 y 坐标
			);

			// 设置起点颜色
			gradient.addColorStop(0, 'red');
			// 设置终点颜色
			gradient.addColorStop(1, 'yellow');

			ctx.fillStyle = gradient;
			ctx.fillRect(20, 20, 150, 150);
			

			// 经向渐变
			gradient = ctx.createRadialGradient(
				200, 200, 50, // 在坐标 x/y处，半径 r 以外开始渐变
				200, 200, 150 // 在坐标 x/y处，半径 r 处渐变完成
			);

			// 设置起点颜色
			gradient.addColorStop(0, 'red');
			// 设置终点颜色
			gradient.addColorStop(1, 'black');

			ctx.fillStyle = gradient;
			ctx.fillRect(200, 200, 150, 150);
		}
	</script>
</body>

</html>